<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上下滚动</title>
    <style>
        body{
            margin:0;
        }
        ul{
            margin:0; padding:0; list-style:none;
        }
        .sld-top{
            width:150px; border:solid 1px #eee; margin:10px auto; text-align:center;
        }
        .sld-top .sld-lis {
            height: 285px;
            width: 100%;
            overflow: hidden;

        }
        .sld-top .sld-move{
            position:relative;
        }

        .sld-top .sld-move li{
             height:95px; overflow:hidden;
        }
        .sld-top .sld-move img{
            width:100%; display:block; margin-bottom:10px;
        }
        .sld-top .sld-pre, .sld-top .sld-next{
            cursor:pointer;
        }

        .sld-left{
            width:560px; border:solid 1px #eee; margin:10px auto; overflow: hidden; height:87px;
        }
        .sld-left .sld-pre, .sld-left .sld-next{
            float:left; width:40px; text-align: center; padding:10px 0; cursor:pointer
        }
        .sld-left .sld-lis{
            width:480px; overflow:hidden; float:left;
        }
        .sld-left .sld-move{
            width:1000px; overflow: hidden; position:relative;
        }
        .sld-left .sld-move li{
            float:left;
        }
        .sld-left .sld-move img{
            width:150px; display:block; margin-right:10px;
        }
        .sld-left a , .sld-top a{
            display:block;
        }
        .sld-left a:hover, .sld-top a:hover{
            background:red; color:#fff;
        }
    </style>
</head>
<body>
    <div class="sld-top">
        <a class="sld-pre"> 上一张 </a>
        <div class="sld-lis">
            <ul class="sld-move">
                <li><img src="images/1.jpg" alt=""/> </li>
                <li><img src="images/2.jpg" alt=""/> </li>
                <li><img src="images/3.jpg" alt=""/> </li>
                <li><img src="images/4.jpg" alt=""/> </li>
                <li><img src="images/5.jpg" alt=""/> </li>
                <li><img src="images/6.jpg" alt=""/> </li>
            </ul>
        </div>
        <a class="sld-next">下一张 </a>
    </div>

    <div class="sld-left">
        <span style="display:none"></span>
        <a class="sld-pre"> 上 <br/>一 <br/>张 </a>
        <div class="sld-lis">
            <ul class="sld-move">
                <li><img src="images/1.jpg" alt=""/> </li>
                <li><img src="images/2.jpg" alt=""/> </li>
                <li><img src="images/3.jpg" alt=""/> </li>
                <li><img src="images/4.jpg" alt=""/> </li>
                <li><img src="images/5.jpg" alt=""/> </li>
                <li><img src="images/6.jpg" alt=""/> </li>
            </ul>
        </div>
        <a class="sld-next">下 <br/>一 <br/>张 </a>
    </div>
</body>
<script src="../jquery.js"></script>
<script src="./yh-slide.js"></script>
<script>
//    $('.sld-left').yhslide({
//        prev:'sld-pre',
//        uls:'sld-move',
//        next:'sld-next',
//        direction:'top',
//        speed:1000
//    })
    $('.sld-left').yhslide()
    $('.sld-top').yhslide({
        direction:'top',
        speed:200
    })

</script>
</html>